<div class="dispatch-main-container">

  <div class="center-panel">
    <div class="banner">
      <div class="weather">
        <app-weather-panel></app-weather-panel>
      </div>

      <div class="stations-wrap">
        <div class="title">典型雨量站雨强</div>
        <div class="area-wrap">
          <div class="area" *ngFor="let item of pptnrList">
            <div class="name"><span class="shuxian"></span>{{item.stadiaName.substring(0, 8)}}</div>
            <div class="value">{{item.drp || '-'}}<label class="dw">mm/h</label></div>
          </div>
        </div>

      </div>

      <div class="buttons">
        <button class="btn-2" nz-button nzType="default" (click)="viewFile(tplContent)">水资源应急调度预案</button>
      </div>
    </div>

    <div class="canvas-wrap">

      <div class="area1" (click)="goPage('yjq')">
        <div>跃进渠防汛调度体系</div>
        <div>胜金关（二）：0mm/h</div>
        <div>总来洪量：0m³/s</div>
        <div>渠道进口流量：-m³/s</div>
      </div>

      <div class="area2" (click)="goPage('hls')">
        <div>贺兰山东麗防汛调度体系</div>
        <div>苏峪口：0mm/h</div>
        <div>总来洪量：0m³/s</div>
        <div>防洪库容：14262.68万m³</div>
        <div>拦洪库进水：-m³/s</div>
      </div>

      <div class="area3" (click)="goPage('qxq')">
        <div>七星渠防汛调度体系</div>
        <div>申滩（二）：0mm/h</div>
        <div>总来洪量：0m³/s</div>
        <div>渠道进口流量：-m³/s</div>
      </div>

      <div class="area4" (click)="goPage('dgq')">
        <div>东干渠防汛调度体系</div>
        <div>侯家桥：0mm/h</div>
        <div>总来洪量：0m³/s</div>
        <div>渠道进口流量：-m³/s</div>
      </div>

    </div>

  </div>

  <div class="right-panel">
    <app-dm-panel></app-dm-panel>
  </div>

  <ng-template #tplContent let-params let-ref="modalRef">
    <ngx-extended-pdf-viewer [src]="fileSrc" useBrowserLocale="true" height="700px"></ngx-extended-pdf-viewer>
  </ng-template>
</div>
